<template>
  <div class="flex-row flex-align-center">
    <div>
      <slot v-if="!editStatus"/>
      <slot v-else="editStatus" name="input"/>
    </div>
    <el-icon v-if="!editStatus" style="margin-left: 30px;cursor: pointer;" @click="handleEdit">
      <EditPen/>
    </el-icon>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { EditPen } from '@element-plus/icons-vue'

const props = defineProps({
  isSwitch: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['edit'])

const editStatus = ref(false)
const handleEdit = () => {
  if (props.isSwitch) {
    editStatus.value = true
  }

  emits('edit')
}

const cancelEdit = () => {
  editStatus.value = false
}

defineExpose({
  cancelEdit
})
</script>